<!-- 绩效提取单 -->
<template>
  <view>
    <u-sticky>
      <u-tabs
        class="tabs"
        :list="tabsList"
        @click="onTabClick"
        :scrollable="false"
        style="padding: 0 24rpx; background: #fff; z-index: 22; position: sticky; top: 0px"
        :activeStyle="{ color: '#171717', fontSize: '14px' }"
        :inactiveStyle="{ color: '#C6C6C6', fontSize: '14px' }"
        lineColor="#1E6FFF"
      ></u-tabs>
    </u-sticky>
    <view class="task_lists" :style="{ paddingBottom: tabvalue == '待办' ? '130rpx' : '0' }">
      <collapse name="基本信息" id="outside1" :maxHeight="maxHeight">
        <view class="listdefault" :id="uId">
          <view class="action" v-for="(item, key) in basicInfo" :key="key">
            <template v-if="item == 'recommendId_dictText'">
              <view class="list1" v-if="detailData.inductionType == '4'">{{ key }}</view>
              <view class="list2" v-if="detailData.inductionType == '4'">{{ detailData[item] }}</view>
            </template>
            <template v-else>
              <view class="list1">{{ key }}</view>
              <view class="list2">{{ detailData[item] }}</view>
            </template>
          </view>
        </view>
      </collapse>
      <action-collapse name="绩效信息" :childFields="childFields" id="outside2" :dataSource="childTable"></action-collapse>
      <default-list name="附件">
        <file-list :fileList="detailData.attachments"></file-list>
      </default-list>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
import actionCollapse from '@/pages/synergy/components/actionCollapse.vue'
import detailInformationList from '@/pages/synergy/components/detailInformationList.vue'
import fileList from '@/pages/synergy/components/fileList.vue'
import collapse from '@/pages/synergy/components/collapse.vue'
import defaultList from '@/pages/synergy/components/defaultList.vue'
import flowList from '@/pages/synergy/components/flowList.vue'
import {
  erpHrPerformanceExtractBillQuerybyid, // 根据id查询信息
  erpHrPerformanceExtractDataList, // 子表
} from '@/api/index.js'
import { BASE_URL } from '@/utils/baseUrl.js'
export default {
  data() {
    return {
      tabsList: [
        { name: '基本信息', id: 'outside1' },
        { name: '绩效信息', id: 'outside2' },
      ],
      childTable: [],
      detailData: {}, // 详情数据
      basicInfo: {
        // 主表信息字段
        单据编号: 'billNo',
        申请人: 'proposer_dictText',
        申请部门: 'proposerDeptId_dictText',
        申请时间: 'createTime',
        生产团队: 'productTeam_dictText',
        '报销金额(元)': 'reimbursementAmount',
      },
      childFields: {
        // 子表字段
        项目名称: 'projectId_dictText',
        业绩归属年度: 'year_dictText',
        签订单位: 'signUnit_dictText',
        业务名称: 'taskId_dictText',
        费用所属团队: 'feeTeamId_dictText',
        费用所属年度: 'feeYear_dictText',
        '合同额（元）': 'contractAmount',
        '分配合同额（元）': 'taskContractAmount',
        '回款额（元）': 'realCollectionPaymentMoney',
        审批级别: 'approvalLevel_dictText',
        难易程度: 'difficultyLevel_dictText',
        任务进度: 'progressName',
        '报告编制绩效（元）': 'reportAchievements',
        '绩效提取金额（元）': 'achievementsMoney',
      },
      resultList: [], // 流程图数据
      nodePositionInfo: {}, // 坐标信息
      processInstanceId: '',
      scrollTop: 0, // 滚动顶部距离
      model: {}, // 处理单据表信息
      resultObj: {}, // 流程图流转信息
      nodeObj: {}, // 流程节点信息
      tabvalue: '', // 协同首页tabs name
      // childSource: [], // 字表数据
      isClick: false,
      maxHeight: 0,
      uId: uni.$u.guid(),
			id:''
    }
  },
  components: {
    actionCollapse,
    detailInformationList,
    fileList,
    collapse,
    defaultList,
    flowList,
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onLoad(options) {
  	this.id = options.id || ''
  	this.loadData(this.id)
		this.getChildTable()
  },
  methods: {
    getChildTable() {
      erpHrPerformanceExtractDataList({
        pageNo: 1,
        pageSize: 100,
        mainId: this.id,
        column: 'createTime',
        order: 'desc',
        field: 'id',
      }).then((response) => {
        this.childTable = response.result?.records || []
      })
    },
    // 查询预立项申请详情
    loadData(id) {
      erpHrPerformanceExtractBillQuerybyid({ id }).then((res) => {
        if (res.success) {
          this.detailData = res.result
					this.timer = setTimeout(() => {
						clearTimeout(this.timer)
						this.timer = null
						this.$nextTick( () => {
						  uni
						    .createSelectorQuery()
						    .select('#' + this.uId)
						    .boundingClientRect((data) => {
						      this.maxHeight = data.height
						    })
						    .exec()
						})
					},300)
        } else {
          this.$refs.uToast.show({
            message: res.message,
            type: 'error',
          })
        }
      })
    },
    // 点击tabs
    onTabClick(item) {
      uni
        .createSelectorQuery()
        .in(this)
        .select(`#${item.id}`)
        .boundingClientRect((data) => {
          uni.pageScrollTo({
            scrollTop: data.top + this.scrollTop - 54,
            duration: 150,
          })
        })
        .exec()
    }
  },
}
</script>
<style lang="scss" scoped>
@import '@/pages/synergy/common/action.scss';
.task_lists {
  padding: 20rpx 20rpx 0;
}
.image_lists {
  padding: 0 0 12rpx 12rpx;
  display: flex;
  flex-wrap: wrap;
  .image_list {
    margin-bottom: 20rpx;
    width: 144rpx;
    margin-right: 14rpx;
    .image_img {
      width: 116rpx;
      height: 116rpx;
      padding: 12rpx;
      background: rgba(0, 0, 0, 0.02);
      border-radius: 1px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      .image_action {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 36rpx;
        height: 36rpx;
      }
      .image_source {
        width: 100%;
        height: 100%;
      }
    }
    .image_name {
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #b2b2b2;
      line-height: 28rpx;
      margin-top: 8rpx;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 152rpx;
    }
  }
}

.flow_right {
  display: flex;
  align-items: center;
  image {
    width: 40rpx;
    height: 40rpx;
  }
  text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1e6fff;
    line-height: 40rpx;
    margin-left: 4rpx;
  }
}

.task_bottom {
  display: flex;
  align-items: center;
  padding: 20rpx 0 20rpx 52rpx;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  .task_bottom_write {
    display: flex;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 8rpx;
    }
    text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7f7f7f;
      line-height: 40rpx;
    }
  }
  .refuse {
    width: 168rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10rpx;
    margin: 0 16rpx 0 52rpx;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }
  .agree {
    width: 318rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #1e6fff;
    border-radius: 10rpx;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }
}
</style>
